import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  // prefix: 'uno-',
  shortcuts: [
    ['uno-center', 'flex justify-center items-center'],
    ['shop-step-title', 'my-4 py-2 font-bold'], //bg-[#F9F9F9] -> var(--el-fill-color-light)
  ],
  presets: [
    presetUno(),
    // 配置属性模式的前缀
    presetAttributify(),
    //   ({
    //   prefix: 'uno-',
    //   prefixedOnly: true, // 只匹配带前缀的属性
    // })

    // 支持图标，需要搭配图标库，eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
    presetIcons({
      prefix: 'uno-icon-', // 给图标添加前缀
      scale: 1.2,
      warn: true,
      extraProperties: {
        display: 'inline-block',
        'vertical-align': 'middle',
      },
    }),
    presetTypography(),
    // presetWebFonts({
    //   fonts: {
    //     sans: 'DM Sans',
    //     serif: 'DM Serif Display',
    //     mono: 'DM Mono',
    //   },
    //   processors: createLocalFontProcessor(),
    // }),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
  // safelist: 'prose prose-sm m-auto text-left'.split(' '),
})
